<template>
	<view>
		
			<view class="community-box" v-for="(item,index) in list" :key='index' style="margin-bottom: 20rpx;">
				
				<view class="font-28 fw4 pb-3 mb-3" style="color:#262626;border-bottom: 1rpx solid #f2f2f2;">{{item.createtime_text}}</view>
				<view class="pb-3 flex flex-wrap">
					<view class="flex mb-3" style="width: 345rpx;">
						<text class="font-28 fw4 cl-b5" style="margin-left: 4rpx;margin-right: 34rpx;">姓名</text>
						<text class="flex-1 text-ellipsis font-28 fw4 cl-1d">{{item.realname}}</text>
					</view>
					<view class="flex mb-3" style="width: 345rpx;">
						<text class="font-28 fw4 cl-b5" style="margin-left: 4rpx;margin-right: 34rpx;">性别</text>
						<text class="flex-1 text-ellipsis font-28 fw4 cl-1d">{{item.gender == 1?'男':'女'}}</text>
					</view>
					<view class="flex mb-3" style="width: 345rpx;">
						<text class="font-28 fw4 cl-b5" style="margin-left: 4rpx;margin-right: 34rpx;">电话</text>
						<text class="flex-1 text-ellipsis font-28 fw4 cl-1d">{{item.mobile}}</text>
					</view>
					<view class="flex mb-3" style="width: 345rpx;">
						<text class="font-28 fw4 cl-b5" style="margin-left: 4rpx;margin-right: 34rpx;">城市</text>
						<text class="flex-1 text-ellipsis font-28 fw4 cl-1d">{{item.city}}</text>
					</view>
				</view>
				
				<block v-if="item.is_intention == 1">
					<view class="building">
						<block v-for="(aitem,aindex) in item.apartment">
							<view :key="aindex" class="flex align-center" style="padding: 20rpx 0;border-bottom: 1px solid #E5E5E5;" @tap="jump({url:'/pages/apartmentDetail/apartmentDetail?id='+aitem.id})">
								<image src="../../static/index/das-icon.png" style="width: 32rpx;height: 32rpx;"></image>
								<view style="flex: 1;color: #202020;font-size: 28rpx;padding-left: 18rpx;">
									{{aitem.title}}</view>
								<image src="../../static/index/zu210-2x.png" style="width: 24rpx;height: 24rpx;"></image>
							</view>
						</block>
						<view class="flex" style="padding: 26rpx 0;" @tap="jump({url:'/pages/roomDetail/roomDetail?id='+item.room.id})">
							<image :src="item.room.thumb" style="width: 144rpx;height: 144rpx;border-radius: 8px;">
							</image>
							<view style="padding-left: 20rpx;">
								<view class="text-one" style="color: #202020;font-size: 28rpx;width: 400rpx;">
									{{item.room.title}}</view>
								<view style="color: #ABABAB;font-size: 24rpx;padding: 10rpx 0 20rpx 0;">{{item.room.size}}㎡
									| {{item.room.toilet}} |
									{{item.room.bed}}
								</view>
								<view class="flex align-center">
									<text class="font-20 fw5" style="color: #C40E0E;">£</text>
									<text class="font-28 fw5"
										style="color: #C40E0E;margin-left: 6rpx;margin-right: 6rpx;">{{item.room.price}}</text>
									<text class="font-20 fw4 cl-88">起 /周</text>
								</view>
							</view>
						</view>
					</view>
				</block>
				<blcok v-else>
					<view class="flex justify-center align-center" style="width:690rpx;height:90rpx;background: #F9F9F9;border-radius: 16rpx;">
						<text class="font-28 fw5 cl-88" >无意向公寓</text>
					</view>
				</blcok>
				
				
				
			</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				page:1,
				total:0,
			}
		},
		onReachBottom() {
			
				if(this.list.length >= this.total){
					return
				}
				this.page++
				this.getList()
			
			
		},
		onLoad() {
			this.getList()
		},
		methods: {
			
			getList() {
				this.$H.post(this.$api.booking_mine_list, {
					page:this.page,
					pagesize:10
				}, {
					token: true
				}).then(res => {
					console.log(res)
					if(this.page == 1){
						this.list = res.data.list
					}else{
						this.list = [...this.list,res.data.list]
					}
					this.total = res.data.total
				})
			},
			
		}
	}
</script>

<style lang="scss">
	page {
		background: #F3F3F3;
	}

	.title {
		padding: 0 0 10rpx 0;
		position: relative;
		font-size: 28rpx;
		font-weight: 400;
		color: #484848;

		&.active:before {
			content: '';
			position: absolute;
			bottom: 10rpx;
			left: 4rpx;
			width: 132rpx;
			height: 10rpx;
			font-weight: bold;
			color: #343434;
			background: linear-gradient(90deg, #FFB24B 0%, rgba(255, 178, 75, 0) 100%);
		}
	}

	.community-box {
		padding: 30rpx;
		background-color: #fff;
		border-top: 1rpx solid #eee;

		.label {
			padding: 10rpx;
			font-size: 20rpx;
			font-weight: 400;
			color: #E99320;
			background: #FFECD2;
			border-radius: 10px 4px 9px 5px;
		}

		.remarks {
			padding-top: 36rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #262626
		}

		.condition {
			padding: 18rpx 0;
			font-size: 30rpx;
			font-weight: 400;
			color: #A1A1A1;
		}

		.building {
			padding: 0 20rpx;
			background: #F9F9F9;
			border-radius: 8px 8px 8px 8px;
		}

		.apartment {
			padding: 0 20rpx;
			background: #F9F9F9;
			border-radius: 8px 8px 8px 8px;
		}

		.apartment-box:last-child {
			border: none;
		}

		.button {
			padding: 20rpx 40rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #FFFFFF;
			background: #FFB24B;
			border-radius: 34px 34px 34px 34px;
		}
	}

	.fixed-button {
		position: fixed;
		bottom: 70rpx;
		left: 70rpx;
		right: 70rpx;

		.button-box {
			width: 100%;
			height: 84rpx;
			background-color: #FFB24B;
			border-radius: 100px 0 100px 100px;

			.size {
				padding-left: 8rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #FFFFFF;
			}
		}
	}
</style>
